<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立体翻牌</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html,body{
    height: 100%;
    width: 100%;
  }
  .content{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .card{
    position: relative;
    height: 300px;
    width: 200px;
    border-radius: 15px;
  }
  /* 小盒子旋转 */
  .card:hover .front{
      transform: rotateY(-180deg);
  }
  .card:hover .back{
      transform: rotateY(0deg);
  }
  .card .front,
  .card .back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-style: preserve-3d;
    /* 旋转到背面不可见 */
    backface-visibility: hidden;
    color: #fff;
    transition: all .7s;
    border-radius: 15px;
  }

  .card .front{
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #00ffc0 0, #11658d 100%);
    z-index: 1;
  }

  .card .back{
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg,#cedce7 0, #596a72 100%);
    /* 旋转180度 */
    transform: rotateY(180deg);

    z-index: 0;
  }
  .card .front p{
      transform: translateZ(50px);
      backface-visibility: hidden;
  }
  .card .back p{
      transform: translateZ(50px);
  }
  .front img{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      border-radius: 15px;
  }
</style>
<body>
<div class="content">
  <div class="card">
    <div class="front">
      <img src="https://webstatic.mihoyo.com/upload/event/2023/05/10/c0990d3a85e45e8da6060fd7444c105b_7897113894733048660.png" alt=""  >
      <p>银狼</p>
    </div>
    <div class="back">
        <p>“星核猎手”的成员，骇客高手</p>
    </div>
  </div>
</div>
</body>
</html>
